<template>
  <p style="height: 15%;"></p>
  <div class="login-warp">
    <el-form :inline="!true" :model="form" label-width="auto">
      <el-form-item label="用户名">
        <el-input
          v-model="form.username"
          placeholder="请输入"
          clearable
        />
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="form.password"
          placeholder="请输入"
          clearable
        />
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button type="primary" @click="loginHandle">登录</el-button>
    </el-form-item>
  </div>
  <p class="tip" style="color: goldenrod;">密码都是 ---- 123456</p>
  <p class="tip" v-for="r in roles" :key="r.id">{{r.label}} ----- {{r.id}}</p>
</template>

<script setup name="Login">
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { loginApi, getMenusApi } from "@/api/login";
import {useTokenStore} from '@/stores/token';
import {useUserStore} from '@/stores/user';
import {useMenusStore} from '@/stores/menus';

const roles = [
  {label: "管理员",  id: "manage"},
  {label: "测试员",  id: "test"},
  {label: "客人",  id: "guest"},
  {label: "开发人员",  id: "dev"},
]

const form = reactive({
  username: "admin",
  password: "123456",
});

const tokenStore = useTokenStore()
const userStore = useUserStore()
const menusStore = useMenusStore()
const router = useRouter()
const route = useRoute()

const loginHandle = () => {
  loginApi(form).then((res) => {
    // console.log(res, "--------");
    const {token, user} = res.data
    getMenusList(user)
    tokenStore.setToken(token)
    userStore.setUser(user)
  });
};

const getMenusList = (user) =>  {
  getMenusApi().then(res => {
    let menus = res.data
    menusStore.setMenus(menus,  user.role)
    menusStore.setBtnsPremissan(res.premisson,  user.role)
    let path = route.query?.redirect ?? '/home'
    router.push(path)
  })
}

</script>

<style scoped>
.login-warp {
  margin: 0 auto;
  width: 500px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(219, 182, 207);
}
:deep(.el-input__wrapper) {
  width: 200px;
}

.tip {
  font-size: 26px;
  padding: 10px;
  text-align: center;
}

</style>
